<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="设置提现密码" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="inout-box">
			<view class="input_box1">
				<u-input v-model="pass1" type="number" maxlength="6" :border="false" placeholder="只支持6位数字"
					input-align="left" :clearable="false" />
			</view>
		</view>

		<view class="inout-box">
			<view class="input_box1">
				<u-input v-model="pass2" type="number" maxlength="6" :border="false" placeholder="再次输入提现密码"
					input-align="left" :clearable="false" />
			</view>
		</view>

		<view class="inout-box">
			<view class="input_box1">
				<u-input v-model="code" type="text" :border="false" placeholder="请输入手机验证码" input-align="left"
					:clearable="false" />
				<view class="getCode" @tap="getCode">{{tips}}</view>
			</view>
		</view>

		<view class="lijipay">
			<u-button hover-class="none" type="info" shape="circle" :ripple="false" :loading="Payloading" @click="lipay()">保存</u-button>
		</view>

		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>

		<u-popup v-model="imgCodeshow" mode="center" width="560" border-radius="20">
			<view class="imgCodeshow_wrap">
				<view class="imgCodeshow_box">
					<view class="img_input">
						<u-input v-model="imagescode" type="text" :clearable="false" :border="false"
							placeholder="验证码" />
					</view>
					<view class="img_code">
						<image :src="codeimages" @click="getimagesCode()"></image>
					</view>
				</view>
				<view class="queren_Btn">
					<view class="lijipay2">
						<u-button hover-class="none" type="info" shape="circle" :ripple="false" @tap="getCode">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Payloading: false,
				pass1: '',
				pass2: '',

				code: '',

				imgCodeshow: false,
				imagescode: '',
				codeimages: '',
				tips: '',
				seconds: 60,
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let that = this
				//if (that.imagescode == '') {
				//	uni.showToast({
				//		title: '请输入图形验证码',
				//		icon: 'none',
				//		duration: 2000
				//	})
				//} else {
				//that.imgCodeshow = false
				if (that.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						that.$api.GetTixianCode({
							//image_code: uni.getStorageSync('userinfo').username
						}).then(res => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							that.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							that.$refs.uCode.start();
						}).catch(err => {
							uni.hideLoading();
							uni.showToast({
								title: err.data.msg,
								icon: 'none',
								duration: 2000
							});
						})
					}, 2000);
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
				//}
			},
			//获取图片验证码
			getimagesCode() {
				let that = this
				if (that.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
				} else {
					if (that.$refs.uCode.canGetCode) {
						that.imgCodeshow = true
						that.Payloading = false
						that.$api.getimageCode({
							tel: uni.getStorageSync('userinfo').username,
							type: 'base64'
						}).then(res => {
							that.codeimages = res.data.result.base64
						}).catch(err => {
							uni.showToast({
								title: err.data.msg,
								icon: 'none',
								duration: 2000
							});
						})
					} else {
						that.$u.toast('倒计时结束后再发送');
					}
				}
			},
			end() {
				//this.$u.toast('倒计时结束');
			},
			start() {
				//this.$u.toast('倒计时开始');
			},



			lipay() {
				let that = this
				if (that.pass1 == '') {
					uni.showToast({
						title: '请输入提现密码',
						icon: 'none',
						duration: 2000
					})
				} else if (that.pass2 == '') {
					uni.showToast({
						title: '请确认提现密码',
						icon: 'none',
						duration: 2000
					})
				} else if (that.pass1 != that.pass2) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none',
						duration: 2000
					})
				} else {
					that.Payloading = true
					setTimeout(() => {
						that.$api.preserveTixianCode({
							code: that.code,
							cash_password: that.pass1,
							re_cash_password: that.pass2
						}).then(res => {
							that.Payloading = false
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}).catch(err => {
							that.Payloading = false
							uni.showToast({
								title: err.data.msg,
								icon: 'none',
								duration: 2000
							});
						})
					}, 2000)
				}
			},
		}
	}
</script>

<style lang="scss">
	.imgCodeshow_wrap {
		padding: 50rpx 50rpx 40rpx 50rpx;
	}

	.imgCodeshow_box {
		display: flex;
		align-items: center;

		.img_input {
			flex: 1;
			background-color: #f5f5f5;
			border-radius: 18rpx;
			padding: 10rpx 20rpx;
			margin-right: 18rpx;
		}

		.img_code {
			flex: 1;

			image {
				width: 100%;
				height: 90rpx;
			}
		}
	}

	.queren_Btn {
		margin-top: 50rpx;

		.lijipay2 {
			width: 100%;
			margin-top: 30rpx;
			position: relative;

			.u-icon {
				margin-right: 10rpx;
			}

			.u-size-default {
				height: 80rpx !important;
				line-height: 80rpx !important;
				background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
				color: #fff;
			}
		}
	}

	.inout-box {
		margin-bottom: 30rpx;

		.input_box1 {
			padding: 20rpx;
			background-color: #f7f7f7;
			border-radius: 18rpx;
			width: 90%;
			position: relative;
			margin: 0 auto;
			top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.getCode {
				//position: absolute;
				right: 0;
				top: 0;
				color: #0084FF;
			}
		}
	}

	.lijipay {
		width: 100%;
		margin-top: 100rpx;
		position: fixed;
		bottom: 2%;
		width: 92%;
		margin: 0 auto;
		left: 0;
		right: 0;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
			color: #fff;
		}
	}
</style>